<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <th:block th:include="common/head::head"/>
    <style type="text/css">
        body {
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            padding: 10px;
        }

        .echarts {
            margin: 20px auto;
            width: 97%;
            height: 400px;
        }

        .view {
            position: absolute;
            right: 3%;
            z-index: 990;
        }

    </style>
    <script th:src="@{${session.jpomProxyPath}+'/static/js/echarts.min.js?v='+${session.staticCacheTime}}"></script>
</head>

<body>
<div style="position: relative">
    <div class="view" th:if="${monitorCycle}">
        <button class="layui-icon  layui-icon-chart-screen" id="viewBtn" title="查看监控数据"
                style="font-size: 18px"></button>
    </div>
    <div class="echarts" id="echarts"></div>
</div>
<table class="layui-table" id="tab_monitor" lay-filter="tab_monitor" style="margin-top:10px"></table>
</body>

<script type="text/javascript" th:if="${monitorCycle}">
    asyncFn.push(function () {
        $("#viewBtn").click(function () {
            layerOpen({
                type: 2,
                title: '查看历史记录',
                shade: 0.8,
                area: ['90%', '90%'],
                content: 'nodeMonitor.html'
            });
        });
    });
</script>
<script type="text/html" id="bar">
    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="kill">关闭</a>
</script>
<script type="text/javascript">
    var cycleTime = [[${cycleTime}]];
    var ws, myEcharts;
    var col = [
        {field: 'pid', title: '进程id', sort: true, width: '6%'},
        {field: 'command', title: '进程名称'},
        {field: 'port', title: '端口', sort: true, width: '6%'},
        {field: 'user', title: '所有者', width: '8%', sort: true},
        {field: 'jpomName', title: '项目名称', width: '8%', sort: true},
        {field: 'res', title: '物理内存', width: '8%', sort: true},
        {field: 'status', title: '进程状态', width: '8%', sort: true},
        {field: 'cpu', title: '占用CPU', width: '8%', sort: true},
        {field: 'mem', title: '物理内存', width: '8%', sort: true},
        {field: 'time', title: '时间总计', sort: true},
        // {field: 'pr', title: '优先级', width: '6%', sort: true},
        // {field: 'NI', title: 'nice值', width: '6%', sort: true},
        {field: 'virt', title: '虚拟内存', width: '8%', sort: true},
        {field: 'shr', title: '共享内存', width: '8%', sort: true},
        {field: 'op', title: '操作', align: 'center', toolbar: '#bar', fixed: 'right'}
    ];
    var config = {
        id: 'tab_monitor',
        elem: '#tab_monitor',
        cols: [col],
        done: function (data) {
        }
    };

    function loadSuccess() {
        loadTop();
        //加载进程信息
        //
        tableRender(config);
        loadProcessList();
        //
        // 表格工具条事件
        table.on('tool(tab_monitor)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if ('kill' === event) {
                layer.confirm('确定要结束该进程吗？', {
                    title: '系统提示'
                }, function (index) {
                    layer.close(index);
                    loadingAjax({
                        url: './kill.json',
                        data: {
                            pid: data.pid
                        },
                        success: function (data) {
                            layer.msg(data.msg);
                            if (200 === data.code) {
                                loadTop();
                            }
                        }
                    });
                });
            }
        });
    }

    function loadTop() {
        silentAjax({
            url: './getTop',
            data: {
                millis: cycleTime
            },
            success: function (data) {
                if (200 === data.code && data.data) {
                    loadEchartsData(data.data);
                    setTimeout(function () {
                        loadTop();
                    }, cycleTime);
                }
            }
        });
    }

    function loadEchartsData(data) {
        let series = data.series;
        let cpuItem = {
            name: 'cpu占用',
            type: 'line',
            data: [],
            showSymbol: false,
            //设置折线为曲线
            smooth: true
        };
        let diskItem = {
            name: '磁盘占用',
            type: 'line',
            data: [],
            showSymbol: false,
            smooth: true
        };
        let memoryItem = {
            name: '内存占用',
            type: 'line',
            data: [],
            showSymbol: false,
            smooth: true
        };
        for (let i = 0; i < series.length; i++) {
            let item = series[i];
            cpuItem.data.push(parseFloat(item.cpu));
            diskItem.data.push(parseFloat(item.disk));
            memoryItem.data.push(parseFloat(item.memory));
        }
        let array = [cpuItem, memoryItem, diskItem];
        loadEcharts(data.scales, array);
    }

    //加载监控图
    function loadEcharts(xAxis, series) {
        if (!series) {
            return;
        }
        let option = {
            title: {
                text: '系统监控'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['cpu占用', '内存占用', '磁盘占用']
            },
            grid: {
                left: '1%',
                right: '2%',
                bottom: '1%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis
            },
            calculable: true,
            yAxis: {
                type: 'value',
                axisLabel: {
                    //设置y轴数值为%
                    formatter: '{value} %'
                },
                max: 100
            },
            series: series
        };
        try {
            if (!myEcharts) {
                myEcharts = echarts.init(document.getElementById('echarts'));
            }
            myEcharts.setOption(option);
        } catch (e) {
            console.error(e);
        }
    }

    function loadProcessList() {
        silentAjax({
            url: './processList',
            success: function (data) {
                if (200 === data.code && data.data) {
                    config.data = data.data;
                    config.limit = data.data.length;
                    tableRender(config);
                    setTimeout(function () {
                        loadProcessList();
                    }, cycleTime);
                } else if (data.msg && data.msg !== "") {
                    layer.msg(data.msg);
                }
            }
        });
    }
</script>

</html>